<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>今日科技头条</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='favicon1.png') }}" />
<!-- JS -->
<script src="{{ url_for('static', filename='jquery-1.8.3.min.js') }}"></script>
<script src="{{ url_for('static', filename='d3.min.js') }}"></script>
<script src="{{ url_for('static', filename='as-common.js') }}"></script>

<script>
var pointer_ix = 0; // points to next paper in line to be added to #rtable
var showed_end_msg = false;
function addNews(num, dynamic) {
  
  if(news.length === 0) { return true; } // nothing to display, and we're done

   
  var root = d3.select("#rtable");
  var base_ix = pointer_ix;
  for(var i = 0;i < num; i++) {
    var ix = base_ix + i;
    if(ix >= news.length) {
      if(!showed_end_msg) {
        if (ix >= numresults){
          var msg = 'Results complete.';
        } else {
          var msg = 'You hit the limit of number of papers to show in one result.';
        }
        root.append('div').classed('msg', true).html(msg);
        showed_end_msg = true;
      }
      break;
    }
    pointer_ix++;

    var p = news[ix];
    var div = root.append('div').classed('apaper', true).attr('id', "123");
    var tdiv = div.append('div').classed('paperdesc', true);
    tdiv.append('span').classed('ts', true).append('a').attr('href', "{{ url_for('redirect_to') }}?url="+p.link+"&"+"id="+p.id).attr('target', '_blank').html(p.title);
    tdiv.append('br');
    tdiv.append('span').classed('ds', true).html(p.time);
    tdiv.append('br');
    div.append('div').attr('style', 'clear:both');
    if(typeof p.abstract !== 'undefined') {
      var abdiv = div.append('span').classed('tt', true).html(p.abstract);
    }
  }
  return pointer_ix >= news.length; // are we done?

}

var news = {{ news | tojson }};
var msg = "{{ msg }}";
var render_format = "{{ render_format }}";
var urlq = ''; // global will be read in to QueryString when load is done
var numresults = "{{ numresults }}";
// when page loads...

$(document).ready(function(){

  urlq = QueryString.q;
  if(msg !== '') { d3.select("#rtable").append('div').classed('msg', true).html(msg); }
    // add papers to #rtable
  var done = addNews(10, false);
  if(done) { $("#loadmorebtn").hide(); }
  $(window).on('scroll', function(){
    var scrollTop = $(document).scrollTop();
    var windowHeight = $(window).height();
    var bodyHeight = $(document).height() - windowHeight;
    var scrollPercentage = (scrollTop / bodyHeight);
    if(scrollPercentage > 0.9) {
      var done = addNews(5, true);
      if(done) { $("#loadmorebtn").hide(); }
    }
  });
  // in top tab: color current choice
  if( render_format === 'recent') { d3.select('#tabrecent').classed('tab-selected', true); }
  if( render_format === 'recommend') { d3.select('#tabrec').classed('tab-selected', true); }
  if( render_format === 'history') { d3.select('#tablib').classed('tab-selected', true); }
});

</script>
</head>
<body>
  <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://www.sourcetreeapp.com/dam/jcr:675dce52-7d60-42c2-aa49-93afafde8eb8/Software-ALL-41.png?cdnVersion=ja" height="179" width="179" alt="" >
<!-- Site information/banner on top left -->


<div id ="titdiv">
  <!-- User account information on top right -->
   <div id="userinfo">
    {% if not g.user %}
    <form action="{{ url_for('login') }}" method="post">
      用户名:
      <input type="text" name="username" class="input-no-border">
      密码:
      <input type="password" name="password" class="input-no-border">
      <input type="submit" value="登录或注册" class="btn-fancy">
    </form>
    {% else %}
    {{ g.user.username }}
    <a href="{{ url_for('logout') }}">log out</a>
    {% endif %}
  </div>

  <!-- Site information/banner on top left -->
  <a href="/">
  <div id="tittxt">
    <h1>今日科技头条</h1>
    Built by Zeping Yao
    
  </div>
  </a>
</div>
<div id="flashesdiv">
{% with flashes = get_flashed_messages() %}
    {% if flashes %}
      <ul class="flashes">
      {% for message in flashes %}
        <li>{{ message }}
      {% endfor %}
      </ul>
    {% endif %}
{% endwith %}
</div>
<div id="sbox">
  <form action="/search" method="get">
    <input name="q" type="text" id="qfield">
  </form>
  <div id="search_hint"></div>
</div>

<div id="pagebar">
  <div class="pagelink" id="tabrecent"><a href="/">最新</a></div>
  <div class="pagelink" id="tabrec"><a href="/recommend">推荐</a></div>
  <div class="pagelink" id="tablib"><a href="/history">浏览记录</a></div>
</div>

<div id="maindiv">

<div id="rtable"></div>

<div id="loadmore">
  <button id="loadmorebtn">载入更多</button>
</div>

</div>

<br><br><br><br><br><br>
</body>
</html>
